<!-- 协同页面 -->
<template>
  <view>
    <!-- 轮播图 -->
    <view class="swiper" :style="[{ animation: 'show 0.2s 1' }]">
      <u-swiper
        :list="swiperList"
        keyName="imgurl"
        :indicator="true"
        indicatorStyle="left: 40rpx; bottom: 60rpx"
        indicatorMode="dot"
        :circular="true"
        :acceleration="true"
        height="210"
      ></u-swiper>
    </view>
    <view
      class="input-content"
      :style="'padding-top:' + inputTop + 'px;padding-bottom:20rpx;background:rgba(30, 111, 255, ' + opacityNum + ')'"
    >
      <u--input
        :style="[{ animation: 'show 0.5s 1' }]"
        class="input"
        placeholder="搜索"
        border="surround"
        shape="circle"
        prefixIcon="search"
        placeholderStyle="color: #ffffff;"
        prefixIconStyle="font-size: 44rpx;color: #FFFFFF"
        color="#FFFFFF"
        v-model="form.processDefinitionName"
        @blur="onConfirm"
        @clear="onConfirm"
      ></u--input>
    </view>

    <!-- 滾動通知 - tabs -->
    <view class="notice-tabs" v-if="notice && notice.length" :style="[{ animation: 'show 0.3s 1' }]">
      <u-notice-bar
        :text="notice"
        @click="onNotice"
        direction="column"
        mode="link"
        bgColor="#FFFFFF"
        color="#7F7F7F"
        :disableTouch="false"
      ></u-notice-bar>
    </view>
    <u-tabs
      class="tabs"
      :list="tabsList"
      @change="onTabClick"
      :current="tabValue"
      :scrollable="false"
      :style="
        !isSticky
          ? 'margin: 0rpx 20rpx 20rpx 20rpx;padding: 8rpx;border-radius:0 0 8rpx 8rpx;'
          : 'width:750rpx;z-index:22;position: sticky;top:' + inputHeight + 'px;'
      "
      :activeStyle="{ color: '#171717', fontSize: '14px' }"
      :inactiveStyle="{ color: '#C6C6C6', fontSize: '14px' }"
      lineColor="#1E6FFF"
    ></u-tabs>

    <!-- 通知的信息 -->
    <mescroll-body
      :style="[{ animation: 'show 0.5s 1', minHeight: listHeight + 'px' }]"
      ref="mescrollRef"
      :up="upOption"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
    >
      <view style="margin: 0 20rpx" v-if="tabValue == 4">
        <swiperActionList :tabIndex="tabValue" :list="backlogList" @delete="onDelete" @detail="onDraftDetail"></swiperActionList>
      </view>
      <view style="margin: 0 20rpx" v-else>
        <notification
          class="card"
          v-for="(item, index) in backlogList"
          :style="[{ animationDelay: (index + 1) * 0.1 + 's' }]"
          :tabIndex="tabValue"
          :key="index"
          :detail="item"
          @click="onClaimNew"
          @handleIgnore="handleIgnore"
          @detail="onDetail"
        ></notification>
      </view>
    </mescroll-body>
    <tabbar :value="1" @update="clickRefresh"></tabbar>
    <u-toast ref="uToast"></u-toast>
		<u-modal 
			:show="signShow" 
			showCancelButton 
			buttonReverse 
			title="确认签收" 
			content="是否签收该任务?" 
			@confirm="handleClaim"
			@cancel="signShow = false"
		>
		</u-modal>
  </view>
</template>

<script>
import tabbar from '@/components/tabbar.vue' // tabbar
import notification from './components/notification.vue' // 消息通知详情
import swiperActionList from './components/swiperActionList.vue' // 消息通知详情
import lFile from '@/components/file/l-file.vue'
import http from '@/utils/request'
// #ifdef APP-PLUS
var jpushModule = uni.requireNativePlugin('JG-JPush')
// #endif
import {
  queryImages, // 轮播图
  taskList, // 待办列表
  taskHistoryList, // 已办列表
  taskAllCcHistoryList, // 知会列表
  myApplyProcessList, // 发起列表
  erpActDeformDraftRecordList, // 待提交列表
  taskClaim, // 签收
  listByUser, // 消息通知
  getProcessNodeInfo, // 查询流程节点信息
  getHistoryProcessNodeInfo, // 查询已办流程信息
} from '@/api/index.js'
import { imageUrl } from '@/utils/common.js'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  components: {
    tabbar,
    lFile,
    notification,
    swiperActionList,
  },
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      optionsAction: [
        {
          text: '删除',
          style: {
            backgroundColor: '#f56c6c',
          },
        },
      ], // 滑动单元格删除

      upOption: {
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          tip: '~ 暂无相关数据 ~', // 提示
        },
      },
      isShow: true,
      emptyOption: {
        i18n: {
          zh: {
            icon: 'https://www.mescroll.com/img/mescroll-empty.png', // 图标路径
            tip: '~ 暂无相关数据 ~', // 提示
          },
          en: {
            icon: 'https://www.mescroll.com/img/mescroll-empty-en.png', // 图标路径
            tip: '~ empty ~',
          },
        },
      },
      form: {
        processDefinitionName: '',
      },
      tabValue: 0, // tabsValue
      isSticky: false, //tabs是否吸顶
      tabsTop: 0, // tabs离顶部的高度
      inputTop: 0, // 輸入框离顶部的高度
      inputHeight: 0, // s输入框的高度
      opacityNum: 0, // 透明度
      swiperList: [], // 轮播图列表
      backlogList: [], // 待办事项列表
      tabsList: [
        {
          name: '待办',
          badge: {
            isDot: false,
          },
					disabled: false
        },
        {
          name: '已办',
					disabled: false
        },
        {
          name: '知会',
					disabled: false
        },
        {
          name: '发起',
					disabled: false
        },
        {
          name: '待提交',
					disabled: false
        },
      ],
      badgeValue: 0,
      notice: [],
      noticeList: [],
      timer: null,
      listHeight: 0,
			signShow: false,
			claimModel: {}
    }
  },
  onPageScroll(e) {
    const scrollTop = e.scrollTop
    var isDot = false
    if (this.badgeValue) {
      isDot = true
    } else {
      isDot = false
    }
    if (e.scrollTop >= this.tabsTop) {
      this.isSticky = true

      this.tabsList = [
        {
          name: '待办',
          badge: {
            isDot: isDot,
          },
					disabled: false
        },
        {
          name: '已办',
					disabled: false
        },
        {
          name: '知会',
					disabled: false
        },
        {
          name: '发起',
					disabled: false
        },
        {
          name: '待提交',
					disabled: false
        },
      ]
    } else {
      this.isSticky = false
      this.tabsList = [
        {
          name: '待办',
          badge: {
            isDot: isDot,
          },
					disabled: false
        },
        {
          name: '已办',
					disabled: false
        },
        {
          name: '知会',
					disabled: false
        },
        {
          name: '发起',
					disabled: false
        },
        {
          name: '待提交',
					disabled: false
        },
      ]
    }
    if (scrollTop <= 20) {
      this.opacityNum = 0
    } else if (20 < scrollTop && scrollTop <= 100) {
      this.opacityNum = scrollTop / 100
    } else if (scrollTop > 100) {
      this.opacityNum = 1
    }
  },
  onBackPress() {},
  onReady() {
    // 监听高度
    let that = this
    const query = uni.createSelectorQuery()

    // 计算输入框的高度
    query.select('.input-content').boundingClientRect() //.swiper是swiper类名，获取当前swiper距离顶部的位置
    query.exec((res) => {
      // 计算tabs的top值
      that.inputHeight = res[0].height
      query.select('.tabs').boundingClientRect() //.swiper是swiper类名，获取当前swiper距离顶部的位置
      this.timer = setTimeout(() => {
        query.exec((value) => {
          if (res && res.length) {
            that.tabsTop = value[1].top - res[0].height
          }
        })
        if (this.timer) {
          clearTimeout(this.timer)
          this.timer = null
        }
      }, 200)
    })
    query.select('.swiper').boundingClientRect() //.swiper是swiper类名，获取当前swiper距离顶部的位置
    query.exec((res) => {
      // uni.setStorageSync('getSystemInfo', e);
			let resHeight = 0
			if (res[2] && res[2].height) {
				resHeight = res[2].height
			}
      that.listHeight = uni.getStorageSync('getSystemInfo').screenHeight - resHeight - 117 - res[1].height
    })
  },
  onShow() {
		// 清空选择通知公告选择的人员
		if (this.$store.state.selectPerson) {
			this.$store.dispatch('actionsSetSelectPerson', '')
		}
    if (this.mescroll && this.mescroll.resetUpScroll()) {
			this.dieabledTabList()
      this.mescroll.resetUpScroll()
    }
  },
  onLoad(options) {
    uni.hideTabBar()
    var _this = this
		if (options.tabValue) {
			this.tabValue = Number(options.tabValue) 
		}
    uni.getSystemInfo({
      success: (res) => {
        uni.setStorageSync('getSystemInfo', res)
        _this.inputTop = res.safeArea.top + 20
      },
    })
  },
  methods: {
    // 下拉加载
    async upCallback(page) {
			this.dieabledTabList()
      this.getSwiperImages() // 获取轮播图
      this.getlistByUser() // 消息通知
      if (this.tabValue == 0) {
        await this.getTaskList(page.num, page.size) // 获取待办列表
      } else if (this.tabValue == 1) {
        await this.getTaskHistoryList(page.num, page.size) // 获取已办列表
      } else if (this.tabValue == 2) {
        await this.getTaskAllCcHistoryList(page.num, page.size) // 获取知会列表
      } else if (this.tabValue == 3) {
        await this.getMyApplyProcessList(page.num, page.size) // 获取发起列表
      } else {
        await this.getActDeformDraftRecordList(page.num, page.size)
      }
    },
		// 点击签收二次弹窗
		onClaimNew(item){
			this.signShow = true
			this.claimModel = Object.assign({},item)
		},
		// 点击签收三次弹窗
		handleClaim(){
			this.signShow = false
			this.onClaim(this.claimModel)
		},
		handleIgnore(item) {
				var _this = this;
				uni.showModal({
				  title: '确认忽略吗',
				  content: '确认忽略后，当前单据将从您的待办消失，请确认已查看详情，否则，请选择"取消"按钮!',
				  success: (res) => {
				    if (res.confirm) {
				      var params = {
				        taskId: item.id,
				      }
				      http.put('/api/erpmng/act/task/ignore', params).then((res) => {
				          if (res.success) {
				            _this.$refs.uToast.show({
				              message: res.message,
				              type: 'success',
				              complete() {
				                _this.backlogList = [] // 先置空列表,显示加载进度
												_this.isShow = true
				                _this.mescroll.resetUpScroll() // 再刷新列表数据
				              },
				            })
				          }
				        })
				        .catch((res) => {
				          //联网失败, 结束加载
				          // this.mescroll.endErr();
				        })
				    }
				  },
				})
			},
		// 点击tabbar 刷新页面
		clickRefresh () {
			this.isShow = true
			this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
			this.timer = setTimeout(() => {
				clearTimeout(this.timer)
				 this.timer = null
				this.$nextTick(() => {
					this.mescroll.resetUpScroll(true) // 再刷新列表数据
				})
			}, this.mescroll.optUp.toTop.duration)
		},

    // 获取轮播图
    getSwiperImages() {
      var params = {
        suitability: 2,
      }
      queryImages(params)
        .then((res) => {
          if (res.result && res.result.length) {
            res.result.map((value) => {
              value.imgurl = imageUrl(value.imgurl)
              return value
            })
          }
          this.swiperList = res.result
        })
        .catch((res) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
        })
    },

    // 获取消息通知
    getlistByUser() {
      listByUser()
        .then((res) => {
          this.notice = []
          if (res.result.sysMsgList && res.result.sysMsgList.length) {
            res.result.sysMsgList.map((value) => {
              this.notice.push(value.titile)
            })
          } else {
            this.listHeight = Number(this.listHeight) + 27
          }
          this.noticeList = res.result.sysMsgList
        })
        .catch((res) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
        })
    },

    // 获取待办列表
    getTaskList(pageNo, pageSize) {
			this.dieabledTabList()
      var params = {
        column: 'createTime',
        order: 'desc',
        pageNo: pageNo,
        pageSize: pageSize,
        bpmBizTitle: this.form.processDefinitionName, // 流程名称
      }
      taskList(params)
        .then((res) => {
					this.allowTabList()
          if (res.success) {
            this.$nextTick(() => {
              // #ifdef APP-PLUS
              plus.runtime.setBadgeNumber(res.result.total)
              jpushModule.setBadge(res.result.total)
              // #endif
            })
            this.mescroll.endByPage(res.result.records.length, res.result.total)
            if (res.result.total) {
              this.tabsList[0].badge.isDot = true
            } else {
              this.tabsList[0].badge.isDot = false
            }
            this.badgeValue = res.result.total
            if (pageNo == 1) this.backlogList = [] //如果是第一页需手动置空列表
            this.backlogList = this.backlogList.concat(res.result.records) //追加新数据
          }
        })
        .catch((res) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
					this.allowTabList()
        })
    },

    // 已办列表
    getTaskHistoryList(pageNo, pageSize) {
			this.dieabledTabList()
      var params = {
        column: 'createTime',
        order: 'desc',
        pageNo: pageNo,
        pageSize: pageSize,
        bpmBizTitle: this.form.processDefinitionName, // 流程名称
      }
      taskHistoryList(params)
        .then((res) => {
					this.allowTabList()
          if (res.success) {
            this.mescroll.endByPage(res.result.records.length, res.result.total)
            if (!res.result.records.length) {
              this.isShow = false
            }
            if (pageNo == 1) this.backlogList = [] //如果是第一页需手动置空列表
            this.backlogList = this.backlogList.concat(res.result.records) //追加新数据
          }
					
        })
        .catch((res) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
					this.allowTabList()
        })
    },

    // 知会列表
    getTaskAllCcHistoryList(pageNo, pageSize) {
			this.dieabledTabList()
      var params = {
        column: 'createTime',
        order: 'desc',
        pageNo: pageNo,
        pageSize: pageSize,
      }
      // 流程名称
      if (this.form.processDefinitionName) {
        params.bpmBizTitle = this.form.processDefinitionName // 流程名称
      }
      taskAllCcHistoryList(params)
        .then((res) => {
					this.allowTabList()
          if (res.success) {
            this.mescroll.endByPage(res.result.records.length, res.result.total)
            if (!res.result.records.length) {
              this.isShow = false
            }
            if (pageNo == 1) this.backlogList = [] //如果是第一页需手动置空列表
            this.backlogList = this.backlogList.concat(res.result.records) //追加新数据
          }
        })
        .catch((res) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
					this.allowTabList()
        })
    },

    // 发起列表
    getMyApplyProcessList(pageNo, pageSize) {
			this.dieabledTabList()
      var params = {
        column: 'createTime',
        order: 'desc',
        pageNo: pageNo,
        pageSize: pageSize,
        // bpmBizTitle: this.form.processDefinitionName, // 流程名称
      }
			if (this.form.processDefinitionName) {
				params.bpmBizTitle = this.form.processDefinitionName // 流程名称
			}
      myApplyProcessList(params)
        .then((res) => {
					this.allowTabList()
          if (res.success) {
            this.mescroll.endByPage(res.result.records.length, res.result.total)
            if (!res.result.records.length) {
              this.isShow = false
            }
            if (pageNo == 1) this.backlogList = [] //如果是第一页需手动置空列表
            this.backlogList = this.backlogList.concat(res.result.records) //追加新数据
          }
        })
        .catch((res) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
					this.allowTabList()
        })
    },
    // 待提交列表
    getActDeformDraftRecordList(pageNo, pageSize) {
			this.dieabledTabList()
      var params = {
        // column: 'createTime',
        // order: 'desc',
        pageNo: pageNo,
        pageSize: pageSize,
        userName: uni.getStorageSync('userInfo').username, // 账号名称
				
      }
			if (this.form.processDefinitionName) {
				params.bizBpmTitle = '*' + this.form.processDefinitionName + '*' // 流程名称
			}
      erpActDeformDraftRecordList(params)
        .then((res) => {
					this.allowTabList()
          if (res.success) {
            this.mescroll.endByPage(res.result.records.length, res.result.total)
            if (!res.result.records.length) {
              this.isShow = false
            }
            if (pageNo == 1) this.backlogList = [] //如果是第一页需手动置空列表
            this.backlogList = this.backlogList.concat(res.result.records) //追加新数据
          }
        })
        .catch((res) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
					this.allowTabList()
        })
    },
		
		// 禁止切换tabList
		dieabledTabList () {
			this.tabsList.map((item, index) => {
			 	if (index !== this.tabValue) {
			 		item.disabled = true
					return item
			 	}
			})
		},
		allowTabList () {
			this.tabsList.map((item) => {
				item.disabled = false
				return item
			})
		},
		 

    // 点击通知
    onNotice(index) {
      let item = this.noticeList[index]
      let orderData = JSON.stringify(item)
      let newStr = orderData.replace(/%/g, '%25')
      var value = encodeURIComponent(newStr)
      uni.navigateTo({
        url: `/pages/message/detail?item=${value}&index=${index}`,
      })
    },

    // 点击tabs
    onTabClick(item) {
      this.isShow = true
      if (this.tabValue == item.index) {
        return false
      }
      this.tabValue = item.index
      this.backlogList = [] // 先置空列表,显示加载进度
      this.mescroll.resetUpScroll() // 再刷新列表数据
    },

    // input点击确定
    onConfirm() {
      this.isShow = true
      this.backlogList = [] // 先置空列表,显示加载进度
      this.mescroll.resetUpScroll() // 再刷新列表数据
    },

    // 点击签收
    onClaim(item) {
      var _this = this
      uni.showModal({
        title: '确认签收',
        content: '请确认已查看详情，否则，请选择“取消”按钮!',
        success: (res) => {
          if (res.confirm) {
            var params = {
              taskId: item.id,
            }
            taskClaim(params)
              .then((res) => {
                if (res.success) {
                  _this.$refs.uToast.show({
                    message: '签收成功',
                    type: 'success',
                    complete() {
                      _this.backlogList = [] // 先置空列表,显示加载进度
											_this.isShow = true
                      _this.mescroll.resetUpScroll() // 再刷新列表数据
                    },
                  })
                }
              })
              .catch((res) => {
                //联网失败, 结束加载
                // this.mescroll.endErr();
              })
          }
        },
      })
    },

    // 点击跳转
    onDetail(item,type) {
      var that = this
      var name = this.tabsList[this.tabValue].name
      var promiseUrl = ''
      var result = null
      var params = {}
      if (this.tabValue == 0) {
        promiseUrl = getProcessNodeInfo
        params = { taskId: item.id }
      } else if (this.tabValue == 3) {
        promiseUrl = getHistoryProcessNodeInfo
        params = { procInstId: item.processInstanceId }
      } else {
        promiseUrl = getHistoryProcessNodeInfo
        params = { procInstId: item.processInstanceId, taskId: item.taskId }
      }
      promiseUrl(params)
        .then((res) => {
          let formUrlMobile = ''
          if(type === 'sign') {
            formUrlMobile = res.result.formDetailUrlMobile
            name='知会'
          }else {
            formUrlMobile = res.result.formUrlMobile
          }
          if (res.success) {
            // 解析 url get 参数
            const params = {}
            formUrlMobile
              .split('?')
              .pop()
              .split('&')
              .forEach((child) => {
                if (child) {
                  const [key, value] = child.split('=')
                  params[key] = value
                }
              })
            // 获取 get 传值的前缀，如果流程表单 url 中已经有参数，则需要用 & 连接
            function getPrefix(url) {
              return /^(\/(\w+))+\?/.test(url) ? '&' : '?'
            }
            // 跳转的时候带上流程表单的配置参数
            uni.navigateTo({
              url:
                formUrlMobile +
                `${getPrefix(formUrlMobile)}item=${encodeURIComponent(
                  JSON.stringify(item).replace(/%/g, '%25'),
                )}&params=${encodeURIComponent(JSON.stringify(params).replace(/%/g, '%25'))}`,
              events: {
                // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                // acceptDataFromOpenedPage: function(data) {
                // }
              },
              success: function (data) {
                // 通过eventChannel向被打开页面传送数据
                var params = {
                  nodeObj: encodeURIComponent(JSON.stringify(res.result).replace(/%/g, '%25')),
                  tabvalue: name,
                }
                data.eventChannel.emit('sendMessage', params)
              },
              fail: function (err) {
                that.$refs.uToast.show({
                  message: '请联系管理员配置',
                  type: 'error',
                })
              },
            })
          } else {
            this.$refs.uToast.show({
              message: res.message,
              type: 'error',
            })
          }
        })
        .catch((res) => {
          uni.showToast({
            title: res.message || '服务器报错，请重试！',
            icon: 'none',
          })
        })
    },

    // 待提交点击删除
    onDelete(item, index) {
      var _this = this
      uni.showModal({
        content: '确定删除吗？',
        success: function (res) {
          if (res.confirm) {
            _this.getDelete(item, index)
          } else if (res.cancel) {
            // error
          }
        },
      })
    },
    getDelete(item, index) {
      var _this = this
      http.delete(item.delApi, { id: item.dataId }).then((res) => {
        if (res.success) {
          uni.showToast({
            title: '删除成功',
            icon: 'none',
            complete() {
							_this.isShow = true
              _this.mescroll.resetUpScroll()
            },
          })
        }
      })
    },
    // 待提交点击详情
    onDraftDetail(item) {
			if(item.appUrl=="/pages/purchase/ErpPurchaseCalibrationForm" || item.appUrl=="/pages/purchase/ErpPurchaseApplyInvitationForm"){
				if(item.bizBpmTitle.split('-')[0]=='作废'&&item.bizBpmTitle.split('-')[2].substring(0,2) == 'ZF'){
					uni.showToast({
					  title: 'App暂不支持此功能',
					  icon: 'none',
					})
					return false
				}
			}
			if (item.appUrl == '/pages/purchase/ErpPurchaseCalibrationOpinionForm') {
				uni.showToast({
				  title: 'App暂不支持此功能',
				  icon: 'none',
				})
				return false
			}
      if (item.appUrl) {
        var url = ''
        if (item.appUrl.indexOf('?') == -1) {
          url = item.appUrl + '?id=' + item.dataId
        } else {
          url = item.appUrl + '&id=' + item.dataId
        }
        uni.navigateTo({
          url: url,
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.input-content {
  position: fixed;
  top: 0rpx;
  padding-left: 40rpx;
  width: 750rpx;
  z-index: 22;
  .input {
    background: rgba(255, 255, 255, 0.2);
    width: 670rpx;
    z-index: 22;
  }
}

// 滚动通知 - tabs
.notice-tabs {
  border-radius: 8rpx 8rpx 0 0;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 8rpx;
  background-color: #ffffff;
  // position: relative;
  // top: -40rpx;
}
.tabs {
  background-color: #ffffff;
}

.notification {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 8rpx;

  padding: 20rpx 22rpx 0rpx 32rpx;
  margin-bottom: 20rpx;
  .notification-top {
    display: flex;
    align-items: center;
    .title {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #171717;
      width: 552rpx;
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
  }

  .notification-middle {
    display: flex;
    align-items: center;
    margin-top: 12rpx;
    .label {
      font-size: 20rpx;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
      color: #1e6fff;
      padding: 6rpx 8rpx;
      border-radius: 6rpx;
      border: 1px solid #1e6fff;
      margin-right: 12rpx;
    }
    .label-content {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #919191;
    }
  }

  .notification-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18rpx;
    padding-bottom: 20rpx;
    .avatar-name {
      display: flex;
      align-items: center;
      .avatar {
        margin-right: 8rpx;
        width: 32rpx;
        height: 32rpx;
        image {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
        }
      }
      .name {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #7f7f7f;
      }
    }
    .date-time {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #c6c6c6;
    }
  }
  .btn {
    text-align: center;
    padding: 20rpx 0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1e6fff;
  }
}
.card:active {
  box-shadow: 0 8px 50px #23232333;
}
</style>
